<template>
  <span>
    <V-CommonHeaderLeft>
      <span class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="nav1">
            <navigationChain :chain="chain"></navigationChain>
          </div>
          <div class="body">
            <div class="box">
              <div class="item1">
                <input type="radio" name="initialization" id="initialization">
                <label for="initialization">单据初始化</label>
              </div>
              <div class="item2">
                <p>*初始化系统内所有单据，包含销售、采购、仓库、财务类单据</p>
                <p @click="start(1)">查看详情</p>
              </div>
            </div>
            <div class="box">
              <div class="item1">
                <input type="radio" name="initialization" id="initialization">
                <label for="initialization">商品、客户、单据初始化</label>
              </div>
              <div class="item2">
                <p>*设置项和部分数据会保留，其余数据均会清除</p>
                <p @click="start(2)">查看详情</p>
              </div>
            </div>
            <div class="btn">
              <button>
                <span class="iconfont icon-test129"></span>
                <span>立即初始化</span>
              </button>
            </div>
          </div>
        </div>
        <div class="message-box-1" v-if="start1">
          <div class="box">
            <div class="box1">
              <span>单据初始化</span>
              <span @click="start(0)" class="iconfont icon-test183"></span>
            </div>
            <div class="box2">
              <p>
                系统会清除一下模块的对应数据，
                <span>一经清除无法恢复！</span>请认真阅读，以免导致数据误删！
              </p>
              <el-table :data="tableData1" border style="width: 95%">
                <el-table-column prop="modular" label="模块" width="180"></el-table-column>
                <el-table-column prop="function" label="功能"></el-table-column>
              </el-table>
            </div>
            <div class="box3">
              <span @click="start(0)">我知道了</span>
            </div>
          </div>
        </div>
        <span class="message-box-2" v-if="start2">
          <span class="box">
            <span class="box1">
              <span>商品、客户、订单数据初始化</span>
              <span @click="start(0)" class="iconfont icon-test183"></span>
            </span>
            <div class="box2">
              <p>
                系统会清除一下模块的对应数据，
                <span>一经清除无法恢复！</span>请认真阅读，以免导致数据误删！
              </p>
              <el-table :data="tableData2" border style="width: 95%">
                <el-table-column prop="modular" label="模块" width="180"></el-table-column>
                <el-table-column prop="function" label="功能"></el-table-column>
              </el-table>
            </div>
            <div class="box3">
              <span @click="start(0)">我知道了</span>
            </div>
          </span>
        </span>
      </span>
    </V-CommonHeaderLeft>
  </span>
</template>

<script>
import navigationChain from '@/views/setUp/navigationChain/navigationChain'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      chain: '3',
      start1: false,
      start2: false,
      tableData1: [
        {
          modular: '商品',
          function: '采购单、采购退货单'
        },
        {
          modular: '订单',
          function: '订货单、退货单'
        },
        {
          modular: '仓库',
          function: '出库单、入库单、盘点单、调拨单、出入库明细、成本调整'
        },
        {
          modular: '财务',
          function: '收款单、付款单、资金账户、客户预存款、收支流水'
        }
      ],
      tableData2: [
        {
          modular: '商品',
          function: '商品、供应商、采购单、采购退货单'
        },
        {
          modular: '订单',
          function: '订货单、退货单'
        },
        {
          modular: '客户',
          function: '客户列表、客户对账'
        },
        {
          modular: '仓库',
          function: '出库单、入库单、盘点单、调拨单、出入库明细、成本调整'
        },
        {
          modular: '财务',
          function: '收款单、付款单、资金账户、客户预存款、收支流水'
        },
        {
          modular: '商城',
          function: '商品促销、订单促销、通知公告'
        }
      ],
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        }, {
          name: '系统初始化',
          path: ''
        }
      ]
    }
  },
  created () { },
  methods: {
    start (num) {
      if (num === 1) {
        this.start1 = true
      } else if (num === 2) {
        this.start2 = true
      } else if (num === 0) {
        this.start1 = false
        this.start2 = false
      }
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    navigationChain
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    width: 100%;
    height: 640px;
    background-color: #fff;
    .body {
      padding-left: 20px;
      .box {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 20px;
        padding-top: 20px;
        &:last-child {
          margin-top: 20px;
        }
        .item1 {
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          label {
            font-size: 16px;
            font-weight: 700;
            margin-left: 2px;
            letter-spacing: 1px;
            cursor: pointer;
          }
          input[type="radio"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            background-color: none;
            border: 1px solid #b5bbc4;
            border-radius: 50%;
            margin-right: 8px;
            position: relative;
            cursor: pointer;
            &:hover {
              border: 1px solid #20ade5;
            }
          }
          input[type="radio"]:checked::before {
            content: "00";
            color: transparent;
            position: absolute;
            top: 1.5px;
            left: 1.5px;
            border: 1px solid #20ade5;
            border-radius: 50%;
            background-color: #20ade5;
            width: 11px;
            height: 11px;
            box-sizing: border-box;
          }
          input[type="radio"]:checked {
            border: 1px solid #20ade5;
          }
        }
        .item2 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 15px;

          p:first-child {
            font-size: 12px;
            color: #b7b8b7;
          }
          p:last-child {
            font-size: 12px;
            color: #20bfef;
            margin-left: 15px;
            cursor: pointer;
          }
        }
      }
      .btn {
        width: 90%;
        height: 60px;
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 1px solid #e3e3e3;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        position: fixed;
        bottom: 0px;
        button {
          margin-right: 40px;
          background-color: #37b5e8;
          width: 150px;
          height: 42px;
          line-height: 42px;
          font-size: 16px;
          color: #fff;
          border: none;
          border-radius: 2px;
          cursor: pointer;
          padding: 0 18px;
          box-sizing: border-box;
          .iconfont {
            color: #fff;
            padding-right: 5px;
          }
        }
      }
    }
  }
  .message-box-1,
  .message-box-2 {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    .box {
      width: 700px;
      height: auto;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      .box1 {
        background-color: #f5f5f5;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont {
          font-size: 10px !important;
          font-weight: 900;
          color: #929292;
          cursor: pointer;
        }
      }
      .box2 {
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
        p {
          margin: 10px 0 25px 25px;
          span {
            color: #f00;
          }
        }
        .el-table {
          margin: 0px 0px 15px 20px;
          border: 1px solid #ebebeb;
          /deep/ thead {
            /deep/ th {
              &:first-child {
                /deep/ .cell {
                  text-align: center;
                }
              }
              color: #666;
              background-color: #f5f5f5;
            }
          }
          /deep/ tbody {
            /deep/ td {
              &:first-child {
                /deep/ .cell {
                  text-align: center;
                }
              }
            }
          }
        }
      }
      .box3 {
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 55px;
        line-height: 55px;
        span {
          text-align: center;
          display: inline-block;
          border: 1px solid #37b5e8;
          width: 100px;
          height: 40px;
          line-height: 40px;
          color: #37b5e8;
          background-color: #fff;
          letter-spacing: 2px;
          border-radius: 10px;
          cursor: pointer;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
